<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">

</head>
<body>
    <div id="app"></div>
    <script src="/js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <!-- 引入babel编译器 -->
    <script src="/js/babel.min.js"></script>
    <script type="text/babel">
        // 演示3:使用React+JSX创建元素并挂载
        // ①: 创建元素 -- 使用JSX语法 浏览器不认识 
        let el = (
            <button title="提示信息" className="danger">提交</button>
        )
        // console.log(el); //就是使用React.createElement()创建的虚拟DOM对象
        // ②:查找父容器元素
        let app = document.querySelector('#app')
        // console.log(app);  //原生DOM对象,需要转换为React虚拟DOM对象
        let root = ReactDOM.createRoot(app) //转换为虚拟DOM容器

        // ③:挂载(渲染)子元素
        root.render(el)

    </script>
</body>
</html>